<template>
  <div>
    <div>
      <h1>路由数据访问</h1>
      <h1>路由组件</h1>
      <p>
        fullPath:
        {{ $route.fullPath }}
      </p>
      <p>
        meta.title:
        {{ $route.meta.title }}
      </p>
      <p>
        params.id:
        {{ $route.params.id }}
      </p>
      <p>
        hash:
        {{ $route.hash }}
      </p>
      <p>
        name:
        {{ $route.name }}
      </p>
      <p>
        query.index:
        {{ $route.query.index }}
      </p>
    </div>
    <div>
      <h1>动态切换路由</h1>
      <div>
        <button @click="switchPage('demon5')">demon5</button>
        <button @click="switchPage('demon6')">demon6</button>
        <button @click="go(2)">前进</button>
        <button @click="back(2)">回退</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "demon13",
  mounted() {
    // 路由注册之后this对象就多了一个$route当前路由对象
    // fullPath表示当前路由路径（含有参数的路径）
    // path标识当前路径路由（不含查询参数等）
    // match标识匹配的路由列表（直接访问某路由路径一般只匹配一条）
    // hash表示hash值,表示#之后的值如/Demon13/123#111则hash值为111
    // name表示路由配置的name（如路由中配置的有name、path、component）
    // query表示传递的查询参数,路径？之后的参数键值对
    // params标识访问的路由可以携带传递的参数，传递方式为动态路由配置的参数
    // 如/Demon13/:id=10
    console.log(this.$route);
  },
  methods: {
    switchPage(name) {
      // this.$route当前路由
      // this.$router路由对象
      if (name === "demon5") {
        // 通过js动态切换路由
        // this.$router.push("/Demon5");
        // 传递路由对象参数，通过name切换
        this.$router.push({
          // 通过路由名称路由
          name: "Demon5",
          // 通过path路由: 注意，如果通过path切换路由不能传递params参数
          //   path: "/Demon10/111",
          // 传递参数
          query: {
            name: "lixx"
          },
          // 传递hash
          hash: "#app"
          //   params: {
          //       id: 10
          //   }
        });
      } else {
        // 方式1：push-产生历史记录
        // 通过push切换路由
        // this.$router.push({
        //   name: "Demon6"
        // });
        // 方式2：
        // 通过replace切换路由,区别-replace不会产生历史记录!!
        // 它会替换当前的页面是的当前页面的记录被替换掉了
        this.$router.replace({
          name: "Demon6"
        });
      }
    },
    // 前进
    go(step) {
      // 其他方法：go
      // 前进n次
      console.log("前进：" + step + "次");
      this.$router.go(step);
      //this.$router.back(-step);
    },
    back(step) {
      console.log("回退：" + step + "次");
      this.$router.back(step);
    }
  }
};
</script>
<style lang="stylus" scoped></style>
